<template>
	<view class="container">
		<uni-section title="队员信息" type="line"></uni-section>
		<view class="query-form">
			<view class="query-item">姓名 <view class="query-item-value">{{member.memberName}}</view></view>
			<view class="query-item">手机号 <view class="query-item-value">{{member.phone}}</view></view>
			<view class="query-item">基础积分 <view class="query-item-value">{{member.integralBasic}}</view></view>
			<view class="query-item">总积分 <view class="query-item-value">{{member.integralTotal}}</view></view>
			<view class="query-item">积分排名 <view class="query-item-value">{{member.rank}}</view></view>
		</view>
		<uni-section title="积分明细" type="line"></uni-section>
		<view>
			<view>
				<uni-card>
					<uni-row :gutter="gutter">
						<uni-col :span="12">
							时间
						</uni-col>
						<uni-col :span="6">
							积分增减
						</uni-col>
						<uni-col :span="6">
							备注
						</uni-col>
					</uni-row>
				</uni-card>
				<view v-for="(item, index) in memberIntegralList" :key="index">
					<uni-card>
						<uni-row :gutter="gutter">
							<uni-col :span="12">
								{{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
							</uni-col>
							<uni-col :span="6">
								{{item.integral}}
							</uni-col>
							<uni-col :span="6">
								{{item.remark}}
							</uni-col>
						</uni-row>
					</uni-card>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import { parseTime } from '@/utils/common';
	import { checkPermi, checkRole } from "@/utils/permission";
	import { getMemberintegral } from "@/api/puyu/memberintegral";
  import { listIntegral } from "@/api/puyu/integral";
	export default {
		data() {
			return {
				gutter: 10,
				// 遮罩层
				loading: true,
				// 总条数
				total: 0,
				memberId: 0,
				// 队员信息
				member: {},
				// 队员积分明细
				memberIntegralList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				status: 'more',
			}
		},
		computed: {
			getBalanceNum() {
				let balanceNum = this.student.classNum - this.total;
				return balanceNum;
			},
		},
		created() {
		},
		onLoad(option) {
				let memberId = option.memberId;
				this.memberId = memberId;
				this.queryParams.memberId = memberId;
				this.queryParams.pageNum = 1;
				this.queryParams.pageSize = 10;
			  this.getList();
				getMemberintegral(memberId).then(response => {
					this.member = response.data;
				});
		},
		// onShow() {
		// 	this.getList();
		// },
		methods: {
			parseTime,
			checkPermi,
      checkRole,
			/** 查询课时点名列表 */
			async	getList() {
				let that = this;
				if (that.status == 'loading') {
					return false;
				}
				if (that.status == 'noMore') {
					return false;
				}
				that.status = 'loading';
				// this.queryParams.memberId = this.member.memberId;
				that.queryParams.orderByColumn = 'integralId'; //查询字段是表格中字段名字
				that.queryParams.isAsc = 'descending'; //动态取值排序顺序
				listIntegral(that.queryParams).then(response => {
					if(response.rows.length == 0) {
						that.status = 'noMore';
					} else {
						that.memberIntegralList = that.memberIntegralList.concat(response.rows);
						if (response.rows.length == that.queryParams.pageSize) {
							that.status = 'more';
						} else {
							that.status = 'noMore';
						}
					}
				});
			},
		},
		onReachBottom() {
			if (this.status == 'more') {
				this.queryParams.pageNum += 1;
			  this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */

	.page-sum {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.query-form {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		background-color: #ffffff;
		margin-bottom: 10px;
	}

	.query-item {
		margin: 10rpx;
		padding: 5rpx;
	}
	
	.query-item-value {
		margin-top: 5rpx;
		color: darkgray;
	}
	.remark {
		color: #993399;
		font-weight: bolder;
	}
</style>